<template>
    <!-- v-if
       写法： v-if="表达式"
              v-else-if="表达式"
              v-else
       适用于：切换频率较低场景

       v-show:
       写法：v-show="表达式"
       适用于：切换频率较高场景
       特点：不显示的DOM不会被移除，设置样式不展示style="display: none;"
    -->
    <div class="person">
        <!-- v-show条件渲染 -->
        <h2 v-show="false">欢迎{{ name }}1</h2>
        <h2 v-show="1===1">欢迎{{ name }}2</h2>
        <!-- v-if条件渲染 -->
        <h2 v-if="display">欢迎{{ name }}3</h2>
        <h2 v-if="1===1">欢迎{{ name }}4</h2>
        <hr/>
        当前n的值是：{{ n }}<br/>
        <button @click="n++">点我加1</button>
        <h2 v-if="n===1">Vue</h2>
        <h2 v-else-if="n===2">React</h2>
        <h2 v-else-if="n===3">Angular</h2>
        <h2 v-else>LayUI</h2>
        <br/><br/>
        <h2 v-show="n===1">Vue</h2>
        <h2 v-show="n===2">React</h2>
        <h2 v-show="n===3">Angular</h2>
        <h2 v-show="n===4">LayUI</h2>

        <hr/>
        <!-- v-if和template配合使用，不会增加标签
          <div v-if="n===1">会增加一个div标签
        -->
        <div v-if="n===1">
            <h2>Java</h2>
            <h2>H5</h2>
        </div>
        <template v-if="n===1">
            <h2>Java</h2>
            <h2>H5</h2>
        </template>
    </div>
</template>


<script setup name="Person">
    import {reactive, ref} from "vue";

    let num = ref(100)

    let name = ref('zhangsan')
    let display = ref(false)
    let n = ref(1)
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
    }

    button {
        margin: 0 5px;
    }
</style>